import React from 'react';
import { Modal, Form, Input, Row, Col, Select, InputNumber, Switch, ConfigProvider, FormInstance, Upload, Button } from 'antd';
import { UploadOutlined, DeleteOutlined } from '@ant-design/icons';

const { Option } = Select;

interface ProjectFormModalProps {
    visible: boolean;
    submitting: boolean;
    editing: any;
    form: FormInstance;
    onOk: () => void;
    onCancel: () => void;
    previewVideoFile: File | null;
    onPreviewVideoSelect: (file: File) => boolean;
    onPreviewVideoRemove: () => void;
    currentPreviewVideoUrl?: string; // 当前预览视频URL（编辑时使用）
}

const darkThemeStyles = {
    card: {
        backgroundColor: '#1f1f1f',
        borderColor: '#303030',
    },
    text: {
        primary: '#ffffff',
        secondary: 'rgba(255, 255, 255, 0.65)',
        tertiary: 'rgba(255, 255, 255, 0.45)',
    },
};

const ProjectFormModal: React.FC<ProjectFormModalProps> = ({ visible, submitting, editing, form, onOk, onCancel, previewVideoFile, onPreviewVideoSelect, onPreviewVideoRemove, currentPreviewVideoUrl }) => {
    return (
        <>
            <style>
                {`
                    .dark-theme-modal .ant-modal-title {
                        color: ${darkThemeStyles.text.primary} !important;
                    }
                    .dark-theme-modal .ant-modal-header {
                        color: ${darkThemeStyles.text.primary} !important;
                    }
                    .dark-theme-modal .ant-modal-header .ant-modal-title {
                        color: ${darkThemeStyles.text.primary} !important;
                    }
                `}
            </style>
            <Modal
                title={editing ? '编辑草稿' : '新建草稿'}
                open={visible}
                onOk={onOk}
                okButtonProps={{ loading: submitting }}
                onCancel={onCancel}
                destroyOnClose
                okText="保存"
                cancelText="取消"
                width={600}
                styles={{
                    header: {
                        background: darkThemeStyles.card.backgroundColor,
                        borderBottom: `1px solid ${darkThemeStyles.card.borderColor}`,
                        color: darkThemeStyles.text.primary,
                    },
                    body: {
                        background: darkThemeStyles.card.backgroundColor,
                        color: darkThemeStyles.text.primary,
                    },
                    footer: {
                        background: darkThemeStyles.card.backgroundColor,
                        borderTop: `1px solid ${darkThemeStyles.card.borderColor}`,
                        color: darkThemeStyles.text.primary,
                    },
                    mask: {
                        backdropFilter: 'blur(4px)',
                    },
                    content: {
                        background: darkThemeStyles.card.backgroundColor,
                    },
                }}
                className="dark-theme-modal"
                style={{
                    color: darkThemeStyles.text.primary,
                }}
            >
                <ConfigProvider
                    theme={{
                        components: {
                            Modal: {
                                contentBg: darkThemeStyles.card.backgroundColor,
                                headerBg: darkThemeStyles.card.backgroundColor,
                                titleColor: darkThemeStyles.text.primary,
                                colorText: darkThemeStyles.text.primary,
                            },
                            Form: {
                                labelColor: darkThemeStyles.text.primary,
                                colorText: darkThemeStyles.text.primary,
                            },
                            Input: {
                                colorBgContainer: '#2a2a2a',
                                colorBorder: '#434343',
                                colorText: darkThemeStyles.text.primary,
                                colorTextPlaceholder: 'rgba(255, 255, 255, 0.45)',
                            },
                            InputNumber: {
                                colorBgContainer: '#2a2a2a',
                                colorBorder: '#434343',
                                colorText: darkThemeStyles.text.primary,
                                colorTextPlaceholder: 'rgba(255, 255, 255, 0.45)',
                            },
                            Select: {
                                colorBgContainer: '#2a2a2a',
                                colorBorder: '#434343',
                                colorText: darkThemeStyles.text.primary,
                                colorTextPlaceholder: 'rgba(255, 255, 255, 0.45)',
                                optionSelectedBg: '#177ddc',
                                optionSelectedColor: '#ffffff',
                                colorBgElevated: '#2a2a2a',
                            },
                            Upload: {
                                colorBgContainer: '#2a2a2a',
                                colorBorder: '#434343',
                                colorText: darkThemeStyles.text.primary,
                            },
                            Button: {
                                colorBgContainer: '#2a2a2a',
                                colorBorder: '#434343',
                                colorText: darkThemeStyles.text.primary,
                                colorPrimary: '#1890ff',
                                colorPrimaryHover: '#40a9ff',
                            },
                            Switch: {
                                colorPrimary: '#1890ff',
                                colorPrimaryHover: '#40a9ff',
                            },
                        },
                    }}
                >
                    <Form
                        form={form}
                        layout="vertical"
                        initialValues={{
                            isPublic: false,
                            width: 1920,
                            height: 1080,
                            fps: 30,
                            type: '视频编辑',
                        }}
                    >
                        <Row gutter={16}>
                            <Col span={12}>
                                <Form.Item
                                    name="name"
                                    label="草稿名称"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入草稿名称',
                                        },
                                    ]}
                                >
                                    <Input placeholder="请输入草稿名称" />
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    name="creator"
                                    label="创建人"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入创建人',
                                        },
                                    ]}
                                >
                                    <Input placeholder="请输入创建人" />
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row gutter={16}>
                            <Col span={8}>
                                <Form.Item
                                    name="width"
                                    label="宽度"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入宽度',
                                        },
                                    ]}
                                >
                                    <InputNumber min={1} max={3840} style={{ width: '100%' }} />
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item
                                    name="height"
                                    label="高度"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入高度',
                                        },
                                    ]}
                                >
                                    <InputNumber min={1} max={2160} style={{ width: '100%' }} />
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item
                                    name="fps"
                                    label="帧率"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请选择帧率',
                                        },
                                    ]}
                                >
                                    <Select style={{ width: '100%' }}>
                                        <Option value={24}>24</Option>
                                        <Option value={25}>25</Option>
                                        <Option value={30}>30</Option>
                                        <Option value={50}>50</Option>
                                        <Option value={60}>60</Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row gutter={16}>
                            <Col span={12}>
                                <Form.Item
                                    name="type"
                                    label="类型"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请选择类型',
                                        },
                                    ]}
                                >
                                    <Select placeholder="请选择类型">
                                        <Option value="视频编辑">视频编辑</Option>
                                        <Option value="图片编辑">图片编辑</Option>
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item name="isPublic" label="是否公开" valuePropName="checked">
                                    <Switch />
                                </Form.Item>
                            </Col>
                        </Row>

                        <Form.Item
                            name="detail"
                            label="描述"
                            rules={[
                                {
                                    max: 200,
                                    message: '描述不能超过200个字符',
                                },
                            ]}
                        >
                            <Input.TextArea
                                placeholder="请输入描述"
                                rows={4}
                                showCount
                                maxLength={200}
                                style={{
                                    backgroundColor: '#2a2a2a',
                                    borderColor: '#434343',
                                    color: darkThemeStyles.text.primary,
                                }}
                            />
                        </Form.Item>

                        {/* 预览视频上传 - 新增和编辑都显示 */}
                        <Form.Item label="预览视频" help={<span style={{ color: darkThemeStyles.text.secondary }}>上传一个预览视频，用于在模板列表中展示（可选）</span>}>
                            {previewVideoFile ? (
                                <div
                                    style={{
                                        padding: '16px',
                                        backgroundColor: '#2a2a2a',
                                        borderRadius: '8px',
                                        border: '1px solid #434343',
                                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
                                    }}
                                >
                                    <div
                                        style={{
                                            display: 'flex',
                                            justifyContent: 'space-between',
                                            alignItems: 'center',
                                            marginBottom: '8px',
                                        }}
                                    >
                                        <div
                                            style={{
                                                color: '#ffffff',
                                                fontSize: '14px',
                                                fontWeight: 600,
                                                display: 'flex',
                                                alignItems: 'center',
                                                gap: '8px',
                                            }}
                                        >
                                            <span style={{ color: '#1890ff' }}>🎥</span>
                                            已选择预览视频
                                        </div>
                                        <Button
                                            type="text"
                                            icon={<DeleteOutlined />}
                                            onClick={onPreviewVideoRemove}
                                            size="small"
                                            style={{
                                                color: '#ff4d4f',
                                                padding: '4px 8px',
                                            }}
                                        >
                                            移除
                                        </Button>
                                    </div>
                                    {/* 视频预览 */}
                                    <div
                                        style={{
                                            position: 'relative',
                                            width: '100%',
                                            height: '200px',
                                            backgroundColor: '#000',
                                            borderRadius: '6px',
                                            overflow: 'hidden',
                                            marginBottom: '12px',
                                        }}
                                    >
                                        <video
                                            src={URL.createObjectURL(previewVideoFile)}
                                            style={{
                                                width: '100%',
                                                height: '100%',
                                                objectFit: 'cover',
                                            }}
                                            controls
                                            muted
                                            preload="metadata"
                                        />
                                    </div>

                                    <div
                                        style={{
                                            color: 'rgba(255, 255, 255, 0.85)',
                                            fontSize: '13px',
                                            fontFamily: 'monospace',
                                            backgroundColor: '#1a1a1a',
                                            padding: '6px 8px',
                                            borderRadius: '4px',
                                            border: '1px solid #333',
                                            marginBottom: '8px',
                                        }}
                                    >
                                        {previewVideoFile.name}
                                    </div>
                                    <div
                                        style={{
                                            color: '#52c41a',
                                            fontSize: '12px',
                                            fontWeight: 500,
                                            display: 'flex',
                                            alignItems: 'center',
                                            gap: '4px',
                                        }}
                                    >
                                        <span>📊</span>
                                        文件大小: {(previewVideoFile.size / 1024 / 1024).toFixed(2)} MB
                                    </div>
                                </div>
                            ) : currentPreviewVideoUrl ? (
                                <div
                                    style={{
                                        padding: '16px',
                                        backgroundColor: '#2a2a2a',
                                        borderRadius: '8px',
                                        border: '1px solid #434343',
                                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
                                    }}
                                >
                                    <div
                                        style={{
                                            display: 'flex',
                                            justifyContent: 'space-between',
                                            alignItems: 'center',
                                            marginBottom: '12px',
                                        }}
                                    >
                                        <div
                                            style={{
                                                color: '#ffffff',
                                                fontSize: '14px',
                                                fontWeight: 600,
                                                display: 'flex',
                                                alignItems: 'center',
                                                gap: '8px',
                                            }}
                                        >
                                            <span style={{ color: '#52c41a' }}>🎥</span>
                                            当前预览视频
                                        </div>
                                        <Button
                                            type="text"
                                            icon={<DeleteOutlined />}
                                            onClick={onPreviewVideoRemove}
                                            size="small"
                                            style={{
                                                color: '#ff4d4f',
                                                padding: '4px 8px',
                                            }}
                                        >
                                            移除
                                        </Button>
                                    </div>

                                    {/* 视频播放器 */}
                                    <div
                                        style={{
                                            position: 'relative',
                                            width: '100%',
                                            height: '200px',
                                            backgroundColor: '#000',
                                            borderRadius: '6px',
                                            overflow: 'hidden',
                                            marginBottom: '12px',
                                        }}
                                    >
                                        <video
                                            src={currentPreviewVideoUrl}
                                            style={{
                                                width: '100%',
                                                height: '100%',
                                                objectFit: 'cover',
                                            }}
                                            controls
                                            muted
                                            preload="metadata"
                                        />
                                    </div>

                                    <div
                                        style={{
                                            color: '#52c41a',
                                            fontSize: '12px',
                                            fontWeight: 500,
                                            display: 'flex',
                                            alignItems: 'center',
                                            gap: '4px',
                                        }}
                                    >
                                        <span>🔗</span>
                                        点击下方按钮可更换预览视频
                                    </div>
                                </div>
                            ) : null}

                            <Upload accept="video/*" beforeUpload={onPreviewVideoSelect} showUploadList={false} multiple={false}>
                                <Button
                                    icon={<UploadOutlined />}
                                    style={{
                                        width: '100%',
                                        height: '40px',
                                        borderRadius: '6px',
                                        fontWeight: 500,
                                        background: 'linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%)',
                                        border: '1px solid #434343',
                                        color: '#ffffff',
                                        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
                                        marginTop: previewVideoFile || currentPreviewVideoUrl ? '12px' : '0',
                                    }}
                                >
                                    {previewVideoFile || currentPreviewVideoUrl ? '更换预览视频' : '选择预览视频文件'}
                                </Button>
                            </Upload>
                        </Form.Item>
                    </Form>
                </ConfigProvider>
            </Modal>
        </>
    );
};

export default ProjectFormModal;
